<template>
  <div class="topExpectedMovies">
    <p>近期最受期待</p>
    <van-swipe class="movies" :loop="false" :show-indicators="false" width="100" @change="onChange">
      <van-swipe-item v-for="movie in movieList" :key="movie.id" @click="gotoMovieDetail(movie.id)">
        <img class="thumb" :src="movie.img" :alt="movie.nm" />

        <h5>{{ movie.nm }}</h5>
        <p class="date">{{ movie.comingTitle }}</p>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup>
import { fetchTopExpectedMovies } from '@/api/index.js'
import { onMounted, computed, ref, watch } from 'vue'
import { useStore } from '@/stores/index.js'
const store = useStore()

import { useRouter } from 'vue-router'
const router = useRouter()

// const title = ref('')
// const movieList = ref([])

const limit = ref(10)
const ExpectedMoviesPageNum = ref(1)
const offset = computed(() => {
  return (ExpectedMoviesPageNum.value - 1) * limit.value
})

const hasMore = computed(() => store.hasMoreExpectedMovies)

const list = ref([])

const movieList = computed(() => store.topExpectedMovies)


const gotoMovieDetail = (movieId) => {
  // console.log("电影ID", movieId);
  router.push({ path: `/movie/${movieId}` })
};



onMounted(async () => {
  const res = await fetchTopExpectedMovies(store.currentCity.id, limit.value, offset.value)
  list.value.push(...res.coming)
  store.setTopExpectedMovies(list.value)
  store.setHasMoreExpectedMovies(res.paging.hasMore)
})

//监听并加载更多
// 根据每10条一个分页，每到10，20，30，...判断是否可以加载更多
const onChange = async (index) => {
  // console.log('当前index', index)

  if ((index + 1) / limit.value) {
    if (hasMore.value) {
      ExpectedMoviesPageNum.value = ExpectedMoviesPageNum.value + 1

      const res = await fetchTopExpectedMovies(store.currentCity.id, limit.value, offset.value)
      list.value.push(...res.coming)
      store.setTopExpectedMovies(list.value)
      store.setHasMoreExpectedMovies(res.paging.hasMore)
    }
  }
};

// watch(ExpectedMoviesPageNum, async () => {
//   const res = await fetchTopExpectedMovies(store.currentCity.id, limit.value, offset.value)

//   list.value.push(...res.coming)
//   store.setTopExpectedMovies(list.value)

//   store.setHasMoreExpectedMovies(res.paging.hasMore)
// }, { immediate: true });
</script>

<style scoped>
.topExpectedMovies {
  /* padding: 10px; */
  background-color: #fff;
  margin-top: 50.5px;
}

.topExpectedMovies p {
  font-size: 14px;
  color: #333;
  padding: 15px 10px;
  margin: 0;
}

.movies {
  padding: 0 5px;
  width: 100%;
  box-sizing: border-box;
}

.movies h5 {
  margin: 0 0 3px 0;
  width: 90px;
}

.movies .date {
  font-size: 12px;
  color: #999;
  margin: 0;
  padding: 0;
  text-align: center;
}

:deep(.van-swipe__track) {
  /* width: 100% !important; */
  flex-wrap: nowrap;
  box-sizing: border-box;
}

:deep(.van-swipe-item) {
  width: 100px;
  height: auto;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 15px;
  /* margin-right: 10px; */
}

img.thumb {
  display: block;
  width: 90px;
  height: 125px;
  object-fit: cover;
  position: relative;
  margin-bottom: 10px;
}

h5 {
  width: 100%;
  color: #333;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 0;
}

.van-swipe-item {
  cursor: pointer;
}
</style>
